<template>
  <div class="treelist">
    <div class="title">{{ titleName }}</div>
    <el-tree ref="tree" class="elTree" :data="treeData" :props="treeProps" :node-key="nodeKey" accordion
      @node-click="handleNodeClick">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <div class="btnList" v-show="data[treeProps.children].length">
          <i class="caretIcon el-icon-caret-bottom"></i>
          <!-- <i class="caretIcon el-icon-caret-top"></i> -->
        </div>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'TreeComponent',
  props: {
    nodeKey: {
      type: String,
      default: () => {
        return ''
      }
    },
    titleName: {
      type: String,
      default: () => {
        return '选择'
      }
    },
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    },
    treeProps: {
      type: Object,
      default: () => {
        return {
          value: 'value',
          label: 'label',
          children: 'child'
        }
      }
    }
  },
  data() {
    return {
      activeId: ''
    }
  },
  mounted() {
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
      this.$emit('handleNodeClick', data)
    }
  },
};
</script>

<style lang="scss" scoped>
.treelist {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;

  .title {
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    font-weight: bold;
    color: #00365D;
  }

  .elTree {
    width: 100%;
    height: calc(100% - 50px);
    border: 1px solid #B8BCC3;
  }
}

::v-deep .elTree>.el-tree-node>.el-tree-node__content {
  background-color: #EBEFFF;
}

::v-deep .is-current {
  font-size: 16px;

  .el-tree-node__children {
    .el-tree-node__content {
      background-color: #ffffff !important;
      color: #333333;
    }
  }

  .el-tree-node__content {
    background-color: #6176D0 !important;
    color: #ffffff;
  }
}

::v-deep .el-tree-node__expand-icon {
  display: none;
}

::v-deep .el-tree-node__content {
  border-bottom: 1px solid #B8BCC3;
  height: 36px;
  padding: 0 !important;
  justify-content: center;
  position: relative;

  .caretIcon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>